<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>大抽奖</title>
  <link href="./static/css/app.css" rel="stylesheet">
</head>

<body>
  <div id="app" class="bg">
    <div id="top" class="top">
      <div class="dou"><i class="icon"></i> <span class="text">0</span> <i class="add"></i></div>
      <div class="account">
        <div class="dui router-link-exact-active router-link-active"><a href="shop.html"><i class="icon"></i>兑换商城</a>
        </div>
        <div class="me"><a href="me.html"><i class="icon"></i>我的</a>
        </div>
      </div>
      <div class="crash">
        <div class="malert">
          <div class="dialog-cover" style="display: none;"></div>
          <div class="alertC" style="display: none;">
            <div class="comfirm" style="display: none;"><span class="closeBtn"></span>
              <div class="content">
                <div class="text">
                  <div class="dous dous20">20</div> <button class="btn"></button></div>
                <div class="text">
                  <div class="dous dous50">50</div> <button class="btn"></button></div>
                <div class="text">
                  <div class="dous dous300">300</div> <button class="btn"></button></div>
                <div class="text">
                  <div class="dous dous1000">1000</div> <button class="btn"></button></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="continer">
      <div class="FlipCard">
        <div>
          <div class="header">
            <div class="info"></div>
          </div>
          <div class="malert" id="infoAlert">
            <div class="dialog-cover" style="display: none;"></div>
            <div class="alertC" style="display: none;">
              <div class="gz"><span class="closeBtn"></span>
                <div class="mcontent">
                  <ol>
                    <li>玩家每次下注后有5次翻牌机会，每次机会可选择一张卡片翻开，只要在会用完之前翻到三张一样的卡片即可中奖。</li>
                    <li>游戏开始后，屏幕上面会出现背面朝上的“777、铃铛、西瓜”三种图片的卡片各三张。</li>
                    <li>本游戏仅支持商城宝贝币进行投币，投币后点击“开始”进行投币。</li>
                  </ol>
                  <div class="biao">
                    <div class="item"><span>投注额</span> <span><i  class="icon7">77*3</i></span> <span><i  class="iconling">铃铛*3</i></span> <span><i  class="icontao">樱桃*3</i></span></div>
                    <div class="item"><span>10</span> <span>60</span> <span>30</span> <span>14</span></div>
                    <div class="item"><span>50</span> <span>300</span> <span>150</span> <span>70</span></div>
                    <div class="item"><span>100</span> <span>600</span> <span>300</span> <span>140</span></div>
                    <div class="item"><span>500</span> <span>3000</span> <span>1500</span> <span>700</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="cardWapper">
            <div class="cardItem">
              <div class="front flip in"></div>
              <div class="end flip out"></div>
            </div>
            <div class="cardItem">
              <div class="front flip in"></div>
              <div class="end flip out"></div>
            </div>
            <div class="cardItem">
              <div class="front flip in"></div>
              <div class="end flip out"></div>
            </div>
            <div class="cardItem">
              <div class="front flip in"></div>
              <div class="end flip out"></div>
            </div>
            <div class="cardItem">
              <div class="front flip in"></div>
              <div class="end flip out"></div>
            </div>
            <div class="cardItem">
              <div class="front flip in"></div>
              <div class="end flip out"></div>
            </div>
            <div class="cardItem">
              <div class="front flip in"></div>
              <div class="end flip out"></div>
            </div>
            <div class="cardItem">
              <div class="front flip in"></div>
              <div class="end flip out"></div>
            </div>
            <div class="cardItem">
              <div class="front flip in"></div>
              <div class="end flip out"></div>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="actions">
            <div class="counter">
              <div class="item item10"></div>
              <div class="item item50"></div>
              <div class="item item100"></div>
              <div class="item item500"></div>
            </div>
            <div class="totals">
              5/5 翻牌机会
            </div>
          </div>
          <div class="malert">
            <div class="dialog-cover" style="display: none;"></div>
            <div class="alertC" style="display: none;">
              <div class="duisuc" style="display: none;"><span class="closeBtn"></span>
                <div class="text">
                  余额不足请先充值
                </div> <button type="button" name="button" class="sucbtn">充值</button></div>
            </div>
          </div>
        </div>
        <div class="malert" id="nojiang">
          <div class="dialog-cover" style="display: none;"></div>
          <div class="alertC" style="display: none;">
            <div class="guanzhu"><span class="closeBtn"></span>
              <div class="mcontent">
                <div class="mkey">
                  “很遗憾，未中奖”
                </div>
                <div class="jiang"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="malert" id="jiang">
          <div class="dialog-cover" style="display: none;"></div>
          <div class="alertC" style="display: none;">
            <div class="guanzhu">
              <div class="mcontent">
                <div class="lists">
                  <div class="item item0"></div>
                  <div class="item item0"></div>
                  <div class="item item0"></div>
                </div>
                <div class="counts">
                  <div class="num"><span class="num7"></span> <span class="num0"></span></div>
                </div>
                <div class="jiang"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="malert">
      <div class="dialog-cover" style="display: none;"></div>
      <div class="alertC" style="display: none;">
        <div class="comfirm" style="display: none;"><span class="closeBtn"></span>
          <div class="text">
            <div class="dous"></div>
            <div class="oper"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- built files will be auto injected -->
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
  <script src="static/js/home.js" charset="utf-8"></script>
  <script>
    var sort = [7, 9, 8, 8, 9, 7, 8, 7, 9];
    var tep = [];
    var count = 5;
    var flag = false
    var index = 0;
    $('.cardWapper .cardItem').click(function(event) {
      if (count > 0) {
        if ($(this).hasClass('active')) return;
        $(this).addClass('active')
        $(this).find('.end').addClass('card' + sort[5 - count])
        $(this).find('.front').removeClass('in')
        $(this).find('.end').removeClass('out').addClass('in')
        count--;
      } else {
        window.setTimeout(function() {
          tep = sort.slice(4, sort.length)
          $('.cardWapper .cardItem').not('.active').each(function() {
            index++;
            $(this).addClass('disabled')
            $(this).find('.end').addClass('card' + tep[index])
          })
          $('.cardWapper .cardItem').addClass('active')
          $('.cardWapper .cardItem .front').removeClass('in')
          $('.cardWapper .cardItem .end').removeClass('out').addClass('in')

          if (!flag) {
            $('#nojiang .dialog-cover,#nojiang .alertC').fadeIn()
          } else {
            $('#jiang .dialog-cover,#jiang .alertC').fadeIn()
          }
        }, 2000)
      }
    });
    $('.jiang').click(function() { //再玩一局
      window.location.href = window.location.href
    })
  </script>
</body>

</html>
